<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js文档对象模型</title>
    <style type="text/css">
        .bg {
            background-color: black;
        }

        .ft {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="myDiv" class="bg" title="div">
        <img id="img1">
        <a href="https://www.sohu.com/a/339884382_500262" id="myA"></a>
    </div>
    <script>
        var div = document.getElementById("myDiv");
        var img = document.getElementById("img1");
        var a = document.getElementById("myA");//取得元素属性
        alert(div.id);
        alert(div.className);
        alert(div.title);
        alert(a.href);
        div.id = "myDiv2";
        div.className = "ft";
        div.title = "div2";
        div.align = "center";
        img.src = "img/返校.PNG";
        a.innerHTML = "新浪";
        a.href = "https://www.w3school.com.cn/cssref/pr_text_text-decoration.asp";
        /*
        所有元素节点常用的通用属性：
        element.id设置或返回元素的id
        element.innerHTML设置或者返回元素的内容，可包含节点中的子标签以及内容
        element.innerText设置或者返回元素的内容，不包含节点中的子标签以及内容
        element.className设置或者返回元素的类名
        element.nodeName返回该节点的大写字母标签名
        element.nodeType返回该结点的节点类型，1表示元素节点；2表示属性节点……
        element.nodeValue返回该节点的value值，元素节点的value值为null
        element.childNodes返回元素的子节点的nodeslist对象，nodeslist类似于数组，有length属性，可以使用方括号[index] 访问指定索引的值
        element.firstChild/element.lastChild返回元素的第一个/最后一个子节点（包含注释节点和文本节点）
        element.parentNode返回该结点的父节点
        element.previousSibling返回与当前节点同级的上一个节点（包含注释节点和文本节点）
        element.nextSibling返回与当前节点同级的下一个节点（包含注释节点和文本节点）
        element.chileElementCount：返回子元素（不包括文本节点以及注释节点）的个数
        element.firstElementChild /lastEle-mentChild返回第一个/最后一个子元素（不包括文本节点以及注释节点）
        element.previousElementSibling/nextElementSibling返回前一个/后一个兄弟元素（不包括文本节点以及注释节点）
        element.clientHeight/clientWidth返回内容的可视高度/宽度（不包括边框，边距或滚动条）
        element.offsetHeight/offsetWidth /off-setLeft/offsetTop返回元素的高度/宽度/相对于父元素的左偏移/右偏移（包括边框和填充，不包括边距）
        */
    </script>
</body>

</html>